<template>
    <div class="relative" ref="selectBox">
        <a class="current-roles pointer" @click="showList" v-text="rolesText">

        </a>
        <ul class="authority-box" v-show="selectList">
            <li @click="chooseRoles(1)">
                <p class="title">编辑</p>
                <p class="content">上传/下载/预览/分享/复制/重命名</p>
            </li>
            <li @click="chooseRoles(2)">
                <p class="title">上传/下载</p>
                <p class="content">上传/下载/预览/分享/复制</p>
            </li>
            <li @click="chooseRoles(3)">
                <p class="title">上传/预览</p>
                <p class="content">预览/上传</p>
            </li>
            <li @click="chooseRoles(4)">
                <p class="title">下载</p>
                <p class="content">下载/预览</p>
            </li>
            <li @click="chooseRoles(5)">
                <p class="title">仅上传</p>
                <p class="content">上传</p>
            </li>
            <li @click="chooseRoles(6)">
                <p class="title">仅预览</p>
                <p class="content">预览</p>
            </li>

        </ul>
    </div>
</template>

<script>
  export default {
    name: "SelectRoles",
    props: {
      roles: {
        type: Number,
        default: function () {
          return 1
        }
      }
    },
    model: {
      prop: 'roles',
      event: 'change'
    },
    watch: {
      roles: function (roles) {
        this.rolesText = this.getRolesText(roles)
      }
    },
    created(){
      this.rolesText = this.getRolesText(this.roles)
    },
    data() {
      return {
        rolesText: '编辑',
        selectList: false
      }
    }, methods: {
      getRolesText: function (roles) {
        switch (roles) {
          case 1:
            return '编辑'
          case 2:
            return '上传/下载'
          case 3:
            return '上传/预览'
          case 4:
            return '下载/预览'
          case 5:
            return '下载'
          case 6:
            return '仅上传'
          default:
            return '仅预览'
        }

      },
      showList: function () {
        this.selectList = !this.selectList
      },
      chooseRoles: function (roles) {
        this.selectList = false
        this.$emit('change', roles)
      }
    }

  }
</script>

<style scoped>

    .current-roles {
        font-size: 12px;
        color: #666666;
        letter-spacing: 0.86px;
        position: relative;
    }

    .current-roles:before {
        position: absolute;
        content: '';
        right: -20px;
        top: 7px;
        border-width: 5px 4px 0;
        border-style: solid;
        border-color: #6D6E8C transparent transparent;
    }

    .authority-box {
        position: absolute;
        z-index: 10;
        top: 20px;
        left: -20px;
        height: 370px;
        width: 240px;
        padding-top: 7px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 1px 6px 0 rgba(157, 163, 165, 0.50);
    }

    .authority-box li {
        padding-top: 10px;
        padding-left: 19px;
        box-sizing: border-box;
        height: 60px;
    }

    .authority-box li .title {
        font-size: 12px;
        color: #323232;
        line-height: 18px;
        margin: 0;

    }

    .authority-box li .content {
        font-size: 12px;
        color: #999999;
        line-height: 18px;
    }

    .select-box {
        position: absolute;
        z-index: 10;
    }

</style>
